<script setup lang="ts">
import useAuthStore from '../../store/auth'

const state = reactive({
  loginBtnLoading: false,
  form: {
    code: '',
    name: '',
    password: '',
  },
  rules: {
    code: [
      {
        required: true,
        message: '请输入租户编码',
        trigger: 'change',
      },
    ],
    name: [
      {
        required: true,
        message: '请输入租户账号',
        trigger: 'change',
      },
      {
        min: 3,
        max: 30,
        message: '长度请控制在3到30之间',
        trigger: 'change',
      },
    ],
    password: [
      {
        required: true,
        message: '请输入密码',
        trigger: 'change',
      },
      {
        min: 3,
        max: 30,
        message: '长度请控制在3到30之间',
        trigger: 'change',
      },
    ],
  },
  accountType: '1',
})
const formRef = ref()

const router = useRouter()

function onLogin() {
  toValue(formRef).validate((valid: boolean) => {
    if (!valid)
      return

    state.loginBtnLoading = true
    setTimeout(() => {
      const { setToken } = useAuthStore()
      setToken('123456789')
      state.loginBtnLoading = false

      router.replace('/')
    }, 1000)
  })
}
</script>

<template>
  <div class="page">
    <ElCard class="w-35%">
      <template #header>
        <div class="text-center font-bold text-24px">
          Login
        </div>
      </template>

      <ElForm
        ref="formRef"
        label-width="auto"
        :model="state.form"
        :rules="state.rules"
      >
        <ElFormItem
          label="租户编码"
          prop="code"
        >
          <ElInput
            v-model="state.form.code"
            clearable
            placeholder="请输入租户编码"
          />
        </ElFormItem>

        <ElFormItem
          label="租户账号"
          prop="name"
        >
          <ElInput
            v-model="state.form.name"
            clearable
            placeholder="请输入租户账号"
          >
            <template #append>
              <ElSelect
                v-model="state.accountType"
                class="w-100px"
              >
                <ElOption
                  label="主账号"
                  value="1"
                />
                <ElOption
                  label="子账号"
                  value="2"
                />
              </ElSelect>
            </template>
          </ElInput>
        </ElFormItem>
        <ElFormItem
          label="密码"
          prop="password"
        >
          <ElInput
            v-model="state.form.password"
            clearable
            placeholder="请输入密码"
          />
        </ElFormItem>
      </ElForm>

      <ElButton
        :loading="state.loginBtnLoading"
        type="primary"
        class="w-full mt-24px"
        @click="onLogin()"
      >
        登录
      </ElButton>
    </ElCard>
  </div>
</template>

<style lang="less" scoped>
.page {
  inline-size: 100%;
  block-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
